<template>
  <!-- 如果当前遍历项没有children，视为子菜单项，注意所有的key都是path用于路由跳转，以及当前选中记录 -->
  <a-menu-item v-if="(!item.children && !item.hidden)" :key="item.path" @click.stop="menuClick(item)">
    <template #icon>
      <el-icon>
        <component :is="item.meta.icon" class="icon"></component>
      </el-icon>
    </template>
    <a-tooltip v-if="item.meta.title.length > 7">
      <template #title>
        <span style="font-size: 13px;">{{ item.meta.title }}</span>
      </template>
      {{ item.meta.title }}
    </a-tooltip>
    <span v-else>{{ item.meta.title }}</span>
  </a-menu-item>
  <!-- 否则视为子菜单，传入菜单信息并且运用下面定义的函数式组件 -->
  <menu-item v-else-if="(item.children && !item.hidden)" :key="handlePath(item)" :menu-info="item"  v-model:keepAliveList="keepAliveList" />
</template>
<script setup>
import MenuItem from "@/components/menu/menuItem.vue";
import router from "@/router/index.js";
const keepAliveList = defineModel('keepAliveList')
const props = defineProps({
  item: {
    type: Object,
  }
})
const menuClick = (item) => {
  try{
    // if(item.meta.keepAlive){
    //   if(keepAliveList.value.length === 0){
    //     keepAliveList.value.push(item.name)
    //   }else{
    //     let index = keepAliveList.value.findIndex(i=>{
    //       return i === item.name
    //     })
    //     if(index<0){
    //       keepAliveList.value.push(item.name)
    //     }
    //   }
    // }
    router.push(item.path)
  }catch(e){
    console.log(e)
  }
}
const handlePath = (item) => {
  return item.path
}

</script>

<style scoped>

</style>
